<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-04-07 09:46:22
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-04-12 09:42:49
-->
<template>
  <div>
    <el-form
      :model="formList"
      ref="formItem"
      :rules="formRules"
      label-position="top"
    >
      <el-form-item
        prop="text"
        v-if="formList.type === 1"
        :label="formList.name"
      >
        <el-input
          :v-model="formList.text"
          :placeholder="formList.inputTips"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 2"
        prop="rowText"
        :label="formList.name"
      >
        <el-input
          v-model="formList.rowText"
          :placeholder="formList.inputTips"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 3"
        prop="choiceList"
        :label="formList.name"
      >
        <el-checkbox-group
          v-model="formList.choiceList"
          v-if="formList.exhibition == 1"
          disabled
        >
          <el-checkbox
            v-for="(item, index) in formList.labelOptions"
            :key="index"
            :label="item.label"
          ></el-checkbox>
        </el-checkbox-group>
        <el-select
          disabled
          v-model="formList.choiceList"
          multiple
          :placeholder="formList.inputTips"
          v-else
        >
          <el-option
            v-for="item in formList.labelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 15"
        prop="radio"
        :label="formList.name"
      >
        <el-radio-group
          disabled
          v-model="formList.radio"
          v-if="formList.exhibition == 1"
        >
          <el-radio
            v-for="(item, index) in formList.labelOptions"
            :key="index"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
        <el-select
          disabled
          v-model="formList.radio"
          :placeholder="formList.inputTips"
          v-else
        >
          <el-option
            v-for="item in formList.labelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 11"
        prop="dates"
        :label="formList.name"
      >
        <el-date-picker
          :placeholder="formList.inputTips"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="formList.dates"
          disabled
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 14"
        prop="date"
        :label="formList.name"
      >
        <el-date-picker
          disabled
          v-model="formList.date"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 12"
        prop="dropDownPer"
        :label="formList.name"
      >
        <el-select
          v-model="formList.dropDownPer"
          disabled
          :placeholder="formList.inputTips"
        >
          <el-option
            v-for="(item, index) in formList.labelOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 13"
        prop="dropDownDet"
        :label="formList.name"
      >
        <el-select
          v-model="formList.dropDownDet"
          disabled
          :placeholder="formList.inputTips"
        >
          <el-option
            v-for="(item, index) in formList.labelOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 9"
        prop="fileList"
        :label="formList.name"
      >
        <el-upload
          ref="upload"
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          disabled
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 10"
        prop="fileList1"
        :label="formList.name"
      >
        <el-upload
          accept="application/vnd.ms-excel,text/plain"
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
        >
          <el-button size="small" type="primary" disabled> 点击上传 </el-button>
        </el-upload>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 16"
        prop="cusNum"
        :label="formList.name"
      >
        <el-input
          :v-model="formList.cusNum"
          :placeholder="formList.inputTips"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item v-if="formList.type === 18" label="分组标题">
        <el-input
          v-model="formList.title"
          :placeholder="formList.inputTips"
          disabled
        ></el-input>
      </el-form-item>
    </el-form>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    formList: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      formRules: {},
      seting: {},
      setShow: true,
      fileList: [],
    };
  },
  created() {
    this.formList.choiceList = [];
  },
  mounted() {
    this.formRules = this.formList.rules;
  },
  methods: {
    // 点击
    onChange(item, i) {
      console.log(i);
      this.active = i;
      this.seting = item;
      this.setShow = true;
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  width: 100%;
}
.list-group {
  width: 80%;
  overflow: auto;
  padding-right: 20px;
  border: 0;
  border-right: 1px solid #ececec;
}
.mainContent {
  width: 100%;
}
.active {
  background-color: #eee;
}
.attriBute {
  padding-left: 20px;
  padding-top: 20px;
}
.Sel {
  margin-left: 20px;
}
/deep/ .el-form-item__error {
  display: none;
}
</style>